<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动发布</view>
		<uni-card class="card">
			<view class="items">
				<text>标题：</text>
				<input type="text" v-model="active.title" />
			</view>
			<view class="items">
				<text>内容：</text>
				<textarea class="area" v-model="active.content"></textarea>
			</view>
			<!-- <view class="items">
				<text>图片/视频：</text>
				<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" @select="select" />
			</view> -->

		</uni-card>
		<button class="bottom" @click="sendActivity()">
			发布
		</button>
	</view>
</template>

<script setup>
import request from '../../../../utils/request';
import { onMounted, ref } from 'vue';

onMounted(()=>{
	active.value.userId = uni.getStorageSync("userinfo").id;
})

const active = ref({
	title: "",
	content: "",
	userId: 0,
})
const imageValue = ref()

function sendActivity(){
	request({
		url:'notice/notice/addActivity',
		method:'POST',
		data:this.active,
		success(res){
			// console.log(res);
			const result = res.data;
			if (result.code == 200){
				uni.showToast({
				  title: '操作成功',
				  icon: 'success',  // 显示成功图标（默认持续1.5秒）
				  duration: 2000    // 提示持续时间（毫秒），默认1500
				});

			}
		}
	})
}

function backPage() {
	uni.navigateBack()
}

function toIndex() {
	uni.navigateTo({
		url: '/pages/index/index'
	})
}
</script>

<style>
	@import url('@/common/app.css');

	.card {
		margin: 0;
		height: 1200rpx;
	}

	input {
		width: 450rpx;
		height: 40rpx;
		padding: 15rpx;
		border: lightgrey 1px solid;
		border-radius: 50rpx;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: start;
		margin-bottom: 20rpx;
	}

	.area {
		width: 450rpx;
		height: 500rpx;
		padding: 15rpx;
		border: lightgrey 1px solid;
		border-radius: 10rpx;
	}

	.bottom {
		color: white;
		background-color: #0863e7;
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 125rpx;
		font-size: 30rpx;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}
</style>